import { commonConst } from '@/platform/commons/consts/common-const';
import { individuationConst } from '@/platform/commons/consts/individuation-const';
import CookieUtils from '@/platform/commons/utils/cookie-util';
import IndividuationUtil from '@/platform/commons/utils/individuation-util';
import AppLayoutContext from '@/platform/contexts/app-layout-context';
import IndividuationModalType from '@/platform/types/individuation-modal-type';
import {
    Alert,
    Button, Card, Col, Modal, Row, Tag, Typography 
} from 'antd';
import React, { useContext, useState } from 'react';



import DynamicIcon from '../dynamic-icon/DynamicIcon';

import classes from './IndividuationModal.module.less';

const IndividuationModal:React.FC<IndividuationModalType> = (props:IndividuationModalType) => {
    const [currentTheme, setCurrentTheme] = useState(CookieUtils.get(commonConst.sessionTheme) || individuationConst.defaultVal.theme);
    const [currentLayout, setCurrentLayout] = useState(CookieUtils.get(commonConst.sessionLayout) || individuationConst.defaultVal.layout);
    
    const dispatchAppLayoutState:any = useContext(AppLayoutContext);
    
    const handleCancel = () => {
        props.onCancel();
    }


    const themeToggle = (key:string) => () => {
        IndividuationUtil.themeChange(key, true, () => {
            setCurrentTheme(key);
            CookieUtils.set(commonConst.sessionTheme, key, 365);
        });
    }

    const layoutToggle = (key:string) => () => {
        const layout = IndividuationUtil.getLayoutConfigByKey(key);
        layout && IndividuationUtil.setCssVariable(layout.cssVariable);
        setCurrentLayout(key);
        CookieUtils.set(commonConst.sessionLayout, key, 365);
        dispatchAppLayoutState(key);
    }

    return (
        <Modal
            destroyOnClose 
            forceRender
            width={580}
            visible
            title="外观设置"
            maskClosable={props.maskClosable}
            keyboard={props.keyboard}
            onCancel={handleCancel}
            footer={[
                <Button key="cancel" onClick={handleCancel}>
                    取消
                </Button>
            ]}
        >
            <div className={classes["app-individuation-container"]}>
                <Alert message="布局与主题设置完后将保存在本地浏览器中，下次使用时自动更换保存的设置！" type="info" />
                
                <Typography.Title level={5} className="app-margin-top15">主题设置</Typography.Title>
                <div className="app-flex">
                    {
                        IndividuationUtil.getIndividuationConfig().themeMenuList.map((item) => (
                            <div className={classes["app-individuation-color-item"]} onClick={themeToggle(item.key)} key={item.key}>
                                <Tag color={item.color} className={classes["app-individuation-color-tag"]}>
                                    {
                                        currentTheme === item.key && (<DynamicIcon iconName="CheckOutlined" />)
                                    }
                                </Tag>
                                <span>{item.label}</span> 
                            </div>
                        ))
                    }
                </div>

                <Typography.Title level={5} className="app-margin-top15">布局设置</Typography.Title>
                <Row gutter={12} className={classes["app-individuation-layout-row"]}>
                    {
                        IndividuationUtil.getIndividuationConfig().layoutList.map((item) => (
                            <Col span={12} key={item.key}>
                                <Card className={classes["app-individuation-layout-card"]} size="small" onClick={layoutToggle(item.key)}>
                                    {
                                        currentLayout === item.key && (
                                            <div className={classes["app-individuation-layout-checked"]}>
                                                <DynamicIcon iconName="SvgIconFullCheck" />
                                            </div>
                                        )
                                    }
                                    
                                    <img className={classes["app-individuation-layout-item"]} src={item.img} alt={item.label} />
                                </Card>
                            </Col> 
                        ))
                    }
                </Row>
                
            </div>
        </Modal>
    )
};

IndividuationModal.defaultProps = {
    maskClosable: false,
    keyboard: false
}

export default IndividuationModal;
